<!--菜单管理主页面-->
<template>
    <div class="base-container">
        <div class="base-toolbar"> <span class="base-toolbar-title">菜单配置</span></div>
        <div>
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="menu-tree">
                        <sys-menu-tree ref="menu_tree"
                            @refreshRoute="refreshRoute" /><!--由于routerDialog在sysMenu组件下因此将该刷新函数传输给sysMenu-->
                    </div>
                </el-col>
                <el-col :span="18">
                    <div class="routes-form">
                        <routes-list-view ref="routes_list" />
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import SysMenuTree from "./components/SysMenuTree";
/*引入菜单树形结构*/
import RoutesListView from "./components/RoutesListView";
/*引入子菜单对应的路由列表*/

export default {
    name: "SysMenuManagement",
    components: { SysMenuTree, RoutesListView },
    methods: {
        refreshRoute(menuId) {
            this.$refs.routes_list.getRourerData(menuId);//对路由列表数据进行请求刷新
        }
    }
};
</script>

<style lang="scss" scoped>
.menu-tree {
    margin-top: 10px;
}
</style>
